<template lang='pug'>
  .step-3
    .form-shebao-title.font-16.font-weight 费用信息
    //- Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="140")
    //-   Row(type="flex" justify="start")
    //-     Col(span="7")
    //-       FormItem(label="收费方案类型：" prop="chargingType"  :label-width="130")
    //-         Select.input-has-border(v-model="formValidate.chargingType"  placeholder="请选择收费类型" clearable @on-change="typeChange")
    //-           Option(v-for="(item, index) in chargingTypeArr" :value="item.key" :key="index") {{ item.value }}
    //-     Col(span="7")
    //-       FormItem(label="收费方案名称：" prop="planId")
    //-         Select.input-has-border(v-model="formValidate.planId" filterable placeholder="请选择")
    //-           Option(v-for="(item, index) in planArr" :value="item.id" :key="item.id") {{ item.name }}
        
    //-     Col(span="4")
    //-       Button.ml-20(type="info" @click="addPlan('formValidate')") 添加
    Table.hasTitle-table.beautiful-table(:columns="thead" :data="planData" :stripe="true")
      template(slot-scope="{ row, index }" slot="default")
        span {{row.isDefault?'是':'否'}}
      template(slot-scope="{ row, index }" slot="operation")
        //- Button.ml-15(type="text" @click="") 查看
        Button.ml-15(type="text" @click="setDefault(row.id, row.category)") 设为默认值
        Button.ml-15(type="text" @click="cancelProject(row.id, row.category)") 删除
      ._table_footer(slot="footer")
        Page(class="_page" :total="totalRows" :current="pageIndex" prev-text="上一页" next-text="下一页" @on-change="onChangePage" show-total)
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'

export default {
  name:'step_3',
  props:{
    customerId: String,
  },
  data () {
    return {
      loading: false,
      bindStaff: false,
      chargingTypeArr: [
        {key: 1, value: '社保方案'},
        {key: 2, value: '公积金方案'},
        {key: 4, value: '商保方案'},
        {key: 8, value: '薪资方案'},
        {key: 16, value: '服务费方案'},
        {key: 32, value: '税费方案'},
      ],
      planArr: [],
      formValidate: {
        chargingType: '',
        planId: ''
      },
      ruleValidate: {
        chargingType: [
          { required: true, type: 'number', message: '请选择方案类型', trigger: 'change' }
        ],
        planId: [
          { required: true, message: '请选择收费方案', trigger: 'change' }
        ]
      },
      thead: [
        {
          title: '收费方案类型',
          minWidth: 150,
          key: 'categoryName'
        },
        {
          title: '收费方案名称',
          minWidth: 150,
          key: 'name'
        },
        {
          title: '是否默认值',
          minWidth: 100,
          key: 'default',
          slot: 'default'
        },
        {
          title: '操作',
          minWidth: 200,
          slot: 'operation',
          align: 'center'
        }
      ],
      planData: [],
      projectId: '',
      bindCategory: 0,
      pageIndex: 1,
      pageSize: 10,
      totalRows: 0

    }
  },

  components: {
  },

  computed: {},

  mounted() {
    // this.getList()
  },

  methods: {
    // 设置默认
    setDefault (id, category) {
      InsureProjectApi.SetDefault({
        category: category,
        projectId: id,
        customerId: this.customerId
      }).then(res => {
        if (res.data.success) {
          this.$Message.success('成功')
          this.getList()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    onChangePage (val) {
      this.pageIndex = val
      this.getList()
    },
    getList () {
      this.loading = true
      InsureProjectApi.SearchProjects({
        Category: 0,
        TargetId:this.customerId,
        IsTargetCustomer: true,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.planData = res.data.data
          this.totalRows = res.data.totalRows
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    typeChange (val) {
      InsureProjectApi.SearchProjects({
        Category: val,
        Name: '',
        pageIndex: 1,
        pageSize: 5000
      }).then(res => {
        if (res.data.success) {
          this.planArr = res.data.data
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    addPlan (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          InsureProjectApi.BindCustomer({
            category: this.formValidate.chargingType,
            projectId: this.formValidate.planId,
            customerId: this.customerId
          }).then(res => {
            if (res.data.success) {
              this.$Message.success(res.data.message)
              this.getList()
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          // this.$Message.error('Fail!');
        }
      })
    },
    cancelProject (id,category) {
      InsureProjectApi.UnBindCustomer({
        category: category,
        projectId: id,
        customerId: this.customerId
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getList()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    openBindModal (id, category) {
      this.projectId = id
      this.bindCategory = category
      this.$refs.bindModal.show()
    },
    stepSubmit () {
      if (this.planData.length > 0) {
        this.$emit('on-next', 4)
      } else {
        this.$Message.warning('请先添加收费方案')
      }
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
      // this.$refs['formValidate'].resetFields()
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>
  .d-f-c{
    display: flex;
    align-items: flex-start;
  }
</style>